<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>监理服务系统</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
    <!--JQ-->
    <script type="text/javascript" charset="utf-8"
            src="${re.contextPath}/plugin/common/js/jquery-1.8.3.min.js"></script>
    <!--Layui-->
    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <!--公用样式JS-->
    <script type="text/javascript" src="${re.contextPath}/plugin/common/js/comment.js" charset="utf-8"></script>
    <!--进度条-->
    <style>
        .layui-table-cell {
            height: 46px;
            line-height: 46px;
        }
    </style>
</head>

<body>
<!--容器-->

<div class="container index clearfix">
    <!--右侧内容-->
    <div class="Right fr" style="width: 100%;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin-top: 12px;">
            <div class="module whitebg layui-row">
                <div class="toolbar-filter">
                    <!--实施地点开始-->
                    <div class="ml10" style="display: inline-block;">
                        <div>实施地点</div>
                        <div>
                            <select id="province" name="province" class="h30 w100 ta_center" lay-ignore
                                    onchange="getCity(this)">
                                <option value="">请选择</option>
                                <#list provincelist as vo>
                                    <option value="${vo.code}">${vo.name}</option>
                                </#list>
                            </select>
                            <select id="city" name="city" class="h30 w100 ta_center" lay-ignore
                                    onchange="getCounty(this)">
                                <option value="">请选择</option>
                                <#--                            <#list citylist as vo>-->
                                <#--                                <option value="${vo.code}">${vo.name}</option>-->
                                <#--                            </#list>-->
                            </select>
                            <select id="county" name="area" class="h30 w100 ta_center" lay-ignore>
                                <option value="">请选择</option>
                                <#--                            <#list citylist as vo>-->
                                <#--                                <option value="${vo.code}">${vo.name}</option>-->
                                <#--                            </#list>-->
                            </select>
                        </div>
                    </div>
                    <!--实施地点结束-->
                    <!--角色开始-->
                    <div class="ml10" style="display: inline-block">
                        <div>角色</div>
                        <select id="proRole" name="proRole" class="h30 w200 ta_center" lay-ignore>
                            <option value="">请选择</option>
                            <#list projectRoleList as vo>
                                <option value="${vo.roleName}">${vo.remark}</option>
                            </#list>
                        </select>
                    </div>
                    <!--角色结束-->
                    <!--行业类型开始-->
                    <div class="ml10" style="display: inline-block">
                        <div>行业类型</div>
                        <select id="hyType" name="hyType" class="h30 w100 ta_center" lay-ignore>
                            <option value="">请选择</option>
                            <#list HYlist as vo>
                                <option value="${vo.badtCode}">${vo.badtName}</option>
                            </#list>
                        </select>
                    </div>
                    <!--行业类型结束-->
                    <!--项目类型开始-->
                    <div class="ml10" style="display: inline-block">
                        <div>项目类型</div>
                        <select id="proType" name="proType" class="h30 w100 ta_center" lay-ignore>
                            <option value="">请选择</option>
                            <#list BTlist as vo>
                                <#if vo.badtCode != "100">
                                    <option value="${vo.badtCode}">${vo.badtName}</option>
                                </#if>
                            </#list>
                        </select>
                    </div>
                    <!--项目类型结束-->

                    <!--服务合同金额开始-->
                    <div class="ml10" style="display: inline-block">
                        <div>服务合同金额(元)</div>
                        <input id="htMoneyMin" type="number" min="0" class="h25 w100 ta_center" placeholder="最小值"> 至
                        <input id="htMoneyMax" type="number" min="0" class="h25 w100 ta_center" placeholder="最大值">
                    </div>
                    <!--服务合同金额结束-->
                    <div class="ml10" style="display: inline-block">
                        <div>项目投资额(元)</div>
                        <input id="tzMoneyMin" type="number" min="0" class="h25 w100 ta_center" placeholder="最小值"> 至
                        <input id="tzMoneyMax" type="number" min="0" class="h25 w100 ta_center" placeholder="最大值">
                    </div>
                    <div style="display: inline-block;padding-left: 10px;">
                        <input type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                               style="margin-top: -5px;border-radius: 5px;" value="统计" onclick="query()">
                        <input type="button" class="layui-btn layui-btn-sm" style="margin-top: -5px;border-radius: 5px;"
                               value="重置" onclick="reset()">
                    </div>
                </div>
                <div class="layui-col-md8 pt20">
                    <table id="projectList" lay-filter="project"></table>
                </div>

            </div>
        </div>
    </div>
</div>
<!--公用样式JS-->
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/tools/cardUtils.js"></script>

<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看详情</a>
</script>

<script>
    var element = "";
    var layer;
    var tableIns;

    function query() {
        table.reload('projectList', {
            where: {
                province: $('#province').val(),
                city: $('#city').val(),
                county: $('#county').val(),
                projectRole: $('#proRole').val(),
                hyType: $('#hyType').val(),
                projectType: $('#proType').val(),
                htMoneyMin: $('#htMoneyMin').val(),
                htMoneyMax: $('#htMoneyMax').val(),
                tzMoneyMin: $('#tzMoneyMin').val(),
                tzMoneyMax: $('#tzMoneyMax').val()
            }
        });
    }

    function reset() {
        $('#province').val("");
        $('#city').val("");
        $('#county').val("");
        $('#proRole').val("");
        $('#hyType').val("");
        $('#proType').val("");
        $('#htMoneyMin').val("");
        $('#htMoneyMax').val("");
        $('#tzMoneyMin').val("");
        $('#tzMoneyMax').val("");
        query();
    }

    function getCity(e) {
        if (!$(e).val()) {
            $("#city").empty();
            $("#city").append("<option value=''>" + "请选择" + "</option>");
            $("#county").empty();
            $("#county").append("<option value=''>" + "请选择" + "</option>");
            form.render('select');
        }
        $.ajax({
            cache: true,
            type: "get",
            url: "/sys/register/getCity",
            data: {"code": $(e).val()},
            success: function (data) {
                if (data.flag) {
                    $("#city").empty();
                    $("#county").empty();
                    $("#city").append("<option value=''>" + "请选择" + "</option>");
                    $("#county").append("<option value=''>" + "请选择" + "</option>");
                    for (var i = 0; i < data.data.length; i++) {
                        $("#city").append("<option value='" + data.data[i].code + "'>" + data.data[i].name + "</option>");
                    }
                    form.render('select');
                }
            }, error: function (error) {
                console.log(error);
                return;
            }
        })
    }


    function getCounty(e) {
        if (!$(e).val()) {
            $("#county").empty();
            $("#county").append("<option value=''>" + "请选择" + "</option>");
            form.render('select');
        }
        $.ajax({
            cache: true,
            type: "get",
            url: "/sys/register/getCity",
            data: {"code": $(e).val()},
            success: function (data) {
                if (data.flag) {
                    $("#county").empty();
                    $("#county").append("<option value=''>" + "请选择" + "</option>");
                    for (var i = 0; i < data.data.length; i++) {
                        $("#county").append("<option value='" + data.data[i].code + "'>" + data.data[i].name + "</option>");
                    }
                    form.render('select');
                }
            }, error: function (error) {
                console.log(error);
                return;
            }
        })
    }

    $(function () {
        layui.use(['table', 'element'], function () {
            table = layui.table;
            //方法级渲染
            tableIns = table.render({
                id: 'projectList',
                elem: '#projectList',
                url: '/sys/statistics/showProjectList',
                parseData: function (res) {
                    if (res && res.length >= 0) {
                        return {
                            "code": 0,
                            "msg": "加载成功",
                            "count": res.length,
                            "data": res
                        }
                    }
                },
                cols: [[
                    // {title: '统计项目', width: '5%',field: 'subject'},
                    {title: '统计项目', field: 'subject', width: '50%', sort: false},
                    {title: '统计数据', field: 'data', width: '50%', sort: false}
                ]],
            });
        })
    })
</script>
</body>
</html>
